<template>
  <div class="login-container pull-height" @keyup.enter.native="handleLogin">

      <div id="task-bar">
          <ul class="task-window"> 
            <el-tag v-for="tag in tags" 
            @click="tagclick(tag)" 
            @close="closeTag(tag)"
            :key="tag.name" closable 
            :type="tag.id == currentTag.id ? 'success' : '' "> {{tag.name}} </el-tag>
          </ul>
        <ul class="task-panel">
            <el-dropdown placement="top-end">
              <el-button size="mini">
                {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/info/index">修改信息</router-link>
                </el-dropdown-item>
                <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </ul>
      </div>
      <div id="desk">
        <ul>
          <li v-for="(item, index) in appList" :style='deskLiStyle(index)'  @click="openApp(item)" shortcut="0" :key="index">
              <img :src="item.ioc">
              <span>{{item.name}}</span><em></em>
          </li>
        </ul>
      </div>
  </div>
</template>
<script>
import { openWindow , reqFullScreen} from "@/util/util";
import { validatenull } from "@/util/validate";
import { mapState, mapGetters } from "vuex";
export default {
  name: "login",
  //mixins: [theme()],
  components: {
  },
  data() {
    return {
      appList:[
        {
          "id": 2,
          "name": "人脸识别",
          "url": "http://192.168.0.12:8000/#/login",
          "type": "0",
          "ioc":'http://www.17sucai.com/preview/584908/2017-08-30/mac%E6%A1%8C%E9%9D%A2htmlcss/icon/computer.png',
          "label": "用户管理",
          "sort": 2
        },
        {
          "id": 3,
          "name": "人脸识别1",
          "url": "https://www.baidu.com1",
          "type": "0",
          "ioc":'http://www.17sucai.com/preview/584908/2017-08-30/mac%E6%A1%8C%E9%9D%A2htmlcss/icon/computer.png',
          "label": "用户管理",
          "sort": 2
        },
        {
          "id": 4,
          "name": "人脸识别2",
          "url": "https://www.baidu.com",
          "type": "0",
          "ioc":'http://www.17sucai.com/preview/584908/2017-08-30/mac%E6%A1%8C%E9%9D%A2htmlcss/icon/computer.png',
          "label": "用户管理",
          "sort": 2
        },{
          "id": 5,
          "name": "人脸识别3",
          "url": "https://www.baidu.com",
          "type": "0",
          "ioc":'http://www.17sucai.com/preview/584908/2017-08-30/mac%E6%A1%8C%E9%9D%A2htmlcss/icon/computer.png',
          "label": "用户管理",
          "sort": 2
        },{
          "id": 6,
          "name": "人脸识别4",
          "url": "https://www.baidu.com",
          "type": "0",
          "ioc":'http://www.17sucai.com/preview/584908/2017-08-30/mac%E6%A1%8C%E9%9D%A2htmlcss/icon/computer.png',
          "label": "用户管理",
          "sort": 2
        },{
          "id": 7,
          "name": "人脸识别5",
          "url": "https://www.baidu.com",
          "type": "0",
          "ioc":'http://www.17sucai.com/preview/584908/2017-08-30/mac%E6%A1%8C%E9%9D%A2htmlcss/icon/computer.png',
          "label": "用户管理",
          "sort": 2
        }

      ],
      tags: [],
      window: {},
      currentTag: {},
      openWindowNum: 0,
      colseWindowCallBackNum: 0,
    };
  },
  created() {
    reqFullScreen();
  },
  mounted() {
    reqFullScreen();
  },  
  beforeDestroy() {
    this.tags = [];
    this.currentTag = {};
    if(!validatenull(this.window)){
      this.window.close();
    }
    
  },
  computed: {
    //...mapGetters(["website"])
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    //计算样式
    deskLiStyle () {
      return function (index) {
        let top = 90 * (index % 10) + 20;
        let left = parseInt(index/10) * 90  + 20;
        return "left:"+left+"px;top:"+top+"px"
      }
    },
  },
  props: [],
  methods: {
    
    openApp(e){//应用图标点击打开应用
      if(!this.hasTag(e)){//此标签是否存在
        this.tagAdd(//不存在增加标签
          { name: e.name, id: e.id , type: '' ,url:e.url}
        );
      }
      this.openWindow(e,1100,800);
    },

    tagclick(e){//标签点击
      this.openWindow(e,1100,800);
    },

    closeTag(e){//关闭窗口和标签关闭点击
      if(validatenull(e)){//标签不存在
        return ;
      }
      this.tagDel(e);
      if(this.currentTag.id == e.id){
        this.currentTag = this.tags[[this.tags.length-1]];
      }
      if(!validatenull(this.currentTag)){
        this.openWindow(this.currentTag,1100,600);
      }else{
        //var windowObj = openWindow("https://www.baidu.com/","appWindow",1,1);
        this.window.close();
      }
    },

    tagAdd(tag){//标签添加
      this.tags.push(tag);
    },

    tagDel(tag){//标签删除
      this.tags.forEach((ele, num) => {
        if (ele.id === tag.id) {
          this.$delete(this.tags, num);
        }
      });
    },

    hasTag(tag){//判断是否存在此标签
      let flag = false;
      for (var i = 0; i < this.tags.length; i++) {
        if(this.tags[i].id === tag.id){
          flag = true;
          break;
        }
      }
      return flag;
    },

    openWindow(tag,width,height){//弹窗具体方法
      this.openWindowNum++;
      let _this = this;
      this.currentTag = { name: tag.name, id: tag.id , type: '' ,url:tag.url};
      let windowObj = openWindow(tag.url,"appWindow",width,height);
      this.window = windowObj;
      let loop = setInterval(function() { //监听窗口关闭 
          if(windowObj.closed) {
            _this.colseWindowCallBackNum++;
            if(_this.colseWindowCallBackNum !=0 && _this.colseWindowCallBackNum == _this.openWindowNum){
              _this.openWindowNum = 0;
              _this.colseWindowCallBackNum = 0;
              try{
                _this.closeTag(_this.currentTag);
              }catch (err){
                _this.$notify.error({
                  title: '错误',
                  message: '您的浏览器阻止了弹窗，无法完成部分功能，请在设置中开启',
                  duration: 0
                });
                console.log(err);
              }
            }
            clearInterval(loop); 
          }  
      }, 1000);
    },

    logout(){
      reqFullScreen();
    }

  }
};
</script>

<style lang="scss">
.login-container::before {
  z-index: -999;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/menglong2.jpg");
  background-size: cover;
}
#task-bar{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:34px;
  overflow:hidden;
  border-top:1px solid #272C36;
  border-color:rgba(20, 20, 20, 0.8);
  background:#31323A;
  background:rgba(40, 40, 40, 0.9);
  opacity:0.9;
  filter:alpha(opacity=20)
}
.task-panel{
  position:absolute;
  top:0;
  right:0px;
  height:100%;
  overflow:hidden;
  float: left;
}
#desk{position:absolute;top:0;bottom:34px;width:100%;overflow:hidden;*z-index:2}
#desk ul{
  width:100%;
  height:100%;
  overflow:hidden;
  position:absolute
}
#desk ul li{
  width:80px;
  height:57px;
  padding:10px 0;
  text-align:center;
  position:absolute;
  cursor:pointer
}
#desk ul li img{
  border-radius:3px 3px 3px 3px;
  display:block;
  height:40px;width:40px;
  margin:auto
}
#desk ul li span{
  background:none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
  border-radius:10px 10px 10px 10px;
  filter:none;
  color:#fff;
  display:inline-block;
  height:20px;
  line-height:20px;
  margin-top:5px;
  overflow:hidden;
  padding:0 8px;
  position:relative;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;z-index:1;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/ui/shortcut_text.png', sizingMethod='scale')
}
#desk ul li em{
  display:none;
  position:absolute;
  top:0;left:0;
  z-index:0;
  width:80px;
  height:77px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  background:#000;
  opacity:0.12;
  filter:alpha(opacity=12)}
#desk ul li:hover em,
#desk ul li.hover em{display:block}
#desk ul li.focus em{display:block;opacity:0.25;filter:alpha(opacity=25)}
  .el-tag{
    margin-left: 5px;
  }
</style>
